<template>
  <div class="user-edit-phone-page">
    <div class="user-edit-phone">
      <p class="edit-phone-title">
        注册联系电话
        <span class="edit-phone-remark">(不可更改)</span>
      </p>
      <p class="edit-phone-conter">
        <input
          type="text"
          class="edit-phone-input"
          placeholder=""
          disabled="disabled"
          :value="registerAreaCode + ' ' + userInfo.registerMobile"
        >
      </p>
      <p class="edit-phone-card">名片展示联系电话</p>
      <p class="edit-phone-card-conter"> 
        <span class="phone_code" style="" @click="seclectCode">
          <strong>{{phoneCode}}</strong> 
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xialajiantou"></use>
          </svg>
        </span>
        <input
          type="tel"
          class="edit-phone-card-input"
          autofocus="autofocus"
          maxlength="16"
          v-model="Cphone"
        >
      </p>
      <van-actionsheet v-model="show" :actions="actions" cancel-text="取消" @select="onSelect" @cancel="onCancel"/>
      <button class="edit-phone-query" @click="godSub">确认修改</button>
    </div>
  </div>
</template>
<script>
import userService from 'SERVICE/userService'
import strFormat from '@/filters/strFormat'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      Cphone: '',
      mobile: '',
      phoneCode:'+86',
      show: false,
      actions: [
        { name: '中国大陆 +86', phoneCode: '+86' },
        { name: '香港 +852', phoneCode: '+852' }, 
      ],
      registerAreaCode:this.$route.query.registerAreaCode,
      tempAreaCode:this.$route.query.tempAreaCode
    }
  },

  created() {
    let mobileNum = this.$route.query.phoneNum
    this.Cphone = mobileNum
    this.phoneCode = this.tempAreaCode
  },

  computed: {
    ...mapGetters(['userInfo'])
  },

  methods: {
    godSub() {
      if (this.Cphone == '') {
        this.$toast('名片展示手机号不可为空')
      } else { 
        let date = {
          tempPhone: this.Cphone,
          tempAreaCode: this.phoneCode
        }
        // this.upDatePhoneNum(date)
        let reg = /^1[3-9]\d{9}$/g
        if (this.phoneCode == '+86') {
          if (!reg.test(this.Cphone)) {
            return this.$dialog.alert({message: '手机号码不正确，请重新输入！'})
          }else{
            this.upDatePhoneNum(date)
          }
        }
        if (this.phoneCode == '+852') {
          if(this.Cphone.length !== 8) {
            return this.$dialog.alert({message: '手机号码不正确，请重新输入！'})
          }else{
            this.upDatePhoneNum(date)
          }
        }
      }
    },

    async upDatePhoneNum(obj) {
      const result = await userService.upDateUserInfo(obj)
      if (result) {
        this.$store.dispatch('getUserInfo', Object.assign(this.userInfo, { tempPhone: this.Cphone}))
        this.$router.go(-1)
      }
    },
    seclectCode () {
      this.show = true;
    },
    onSelect (item) {
      this.phoneCode = item.phoneCode;
      this.show = false;
    },
    onCancel () {
      this.show = false;
    },
  }
}
</script>
<style lang="less">
.van-dialog {
  border-radius: 12px;
  width: 72%;
  text-align: center;
}
.van-dialog__message {
  font-size: 15px;
  color: rgba(51, 51, 51, 1);
}
.van-button__text {
  font-size: 18px;
  color: rgba(0, 122, 230, 1);
}
.user-edit-phone-page {
  background: #ffffff;
  > .user-edit-phone {
    margin: 27px 16px;
    > .edit-phone-title {
      font-size: 20px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 28px;
      // margin-bottom: 22px;
      > .edit-phone-remark {
        font-size: 15px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        line-height: 21px;
      }
    }
    > .edit-phone-card {
      font-size: 20px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 28px;
      margin-bottom: 22px;
    }
    > .edit-phone-card-conter {
      display: flex;
      > .edit-phone-card-input {
        font-size: 15px;
        font-weight: 500;
        color: #666666;
        line-height: 21px;
        width: 99%;
        border: 0;
        border-bottom: 1px solid #eeeeee;
      }
      >.phone_code {
        width:20%;
        display: flex;
        align-items: center;
        font-size: 15px;
        color:rgba(51, 51, 51, 1);
        border-bottom: 1px solid #eeeeee;
        .icon {
          width:16px;
          height:16px;
          margin-left:5px;
        }
      }
    }
    > .edit-phone-conter {
      margin-bottom: 24px;
      > .edit-phone-input {
        font-size: 15px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        line-height: 21px;
        width: 99%;
        border: 0;
        background-color: #ffffff;
        border-bottom: 1px solid #eeeeee;
      }
    }

    > .edit-phone-query {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
      height: 44px;
      background: rgba(0, 122, 230, 1);
      border-radius: 4px;
      width: 100%;
      border: 0;
      margin-top: 25px;
    }
  }
}
</style>
